@use '@/assets/css/utils.scss' as *;

.app-card-large {
  box-sizing: border-box;
  padding: 0 vw(4);
  background: url('@/assets/images/card/1.png') no-repeat,
    url('@/assets/images/card/2.png') no-repeat,
    url('@/assets/images/card/3.png') no-repeat,
    url('@/assets/images/card/4.png') no-repeat;
  background-position: left top, right top, right bottom, left bottom;
  background-size: vw(80) vw(60), vw(80) vw(60), vw(120) vw(100), vw(80) vw(60);

  .app-card-large-inner {
    height: 100%;
  }
}
.app-card-small {
  background: url('@/assets/images/arrow/1.png') no-repeat,
    url('@/assets/images/arrow/2.png') no-repeat,
    url('@/assets/images/arrow/3.png') no-repeat,
    url('@/assets/images/arrow/4.png') no-repeat;
  background-position: left top, right top, right bottom, left bottom;
  background-size: vw(11) vw(11);
}
.app-card-shadow {
  box-shadow: inset 0 0 vw(30) rgba(#10adff, 0.35);
  border: 1px solid rgba(#23dbfc, 0.6);
  box-sizing: border-box;
}
.app-card-head {
  position: relative;
  height: vw(42);
  display: flex;
  justify-content: center;
  align-items: center;

  $bg-space: 16%;
  $border-space: 8%;
  background: linear-gradient(
    to right,
    transparent $bg-space,
    rgba(#20bef9, 0.6),
    transparent (100% - $bg-space)
  );
  // 边框
  &::before,
  &::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(
      to right,
      transparent $border-space,
      #20bef9,
      transparent (100% - $border-space)
    );
    border-radius: 50%;
  }
  &::before {
    top: 0;
  }
  &::after {
    bottom: 0;
  }

  .app-card-title {
    display: inline-block;
    font-size: vw(18);
    font-weight: bold;
    line-height: vw(24);
    color: #fff;
  }
  .app-card-action {
    position: absolute;
    right: vw(20);
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
  }

  & + .app-card-body {
    height: calc(100% - vw(42));
  }
}

.app-card-body {
  height: 100%;
}
